$(function () {
  // alert(11)

  load()

  // 1. 按下回车 把完整数据 存储到本地存储里面
  // 存储的数据格式 let todolist = [{title: "xxx", done: false}]
  $("#title").on("keydown", function (e) {
    // 回车键的ASCII值是13
    if (e.keyCode === 13) {
      // alert(11)
      // 1. 先读取本地存储的数据 在外面声明一个函数 每次需要读取的时候就直接调用即可
      let local = getDate() // local 得到本地存储数据
      // console.log(local)

      // 2. 把local数组进行更新数据 把最新的数据追加给local数组
      local.push({ title: $(this).val(), done: false })
      // 2.1 把这个数组local存储到本地存储 声明一个保存本地存储函数
      saveDate(local)

      // 3. 将本地数组渲染到页面
      // 3.1 先读取数据
      load()

      $(this).val("")

    }
  })

  // 2. 读取本地存储的数据
  function getDate() {
    let data = localStorage.getItem("todolist")
    if (data !== null) {
      // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
      return JSON.parse(data)
    }
    else return []
  }

  // 3. 保存本地存储函数
  function saveDate(data) {
    localStorage.setItem("todolist", JSON.stringify(data))
  }

  // 4. 渲染加载数据
  function load() {
    let data = getDate()
    // 遍历这个数据

    // 这里会有一个很无语的bug 就是当页面没有被清空的时候 你进行追加数据 那么页面就会将本地存储已经存在的内容再次进行打印一遍
    // 所以 这里要先进行清空页面(清空ol里面的元素) 然后再进行追加
    $("ol,ul").empty()

    let todoCount = 0
    let doneCount = 0

    $.each(data, function (i, n) {
      // console.log(n)
      if (n.done) $("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>"), doneCount++
      else $("ol").prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>"), todoCount++
    })

    $("#todocount").text(todoCount)
    $("#donecount").text(doneCount)
  }

  // 5. 删除操作
  // 由于我们是本地存储进行渲染，那么我们只要对本地存储的该元素进行删除 然后再次渲染即可
  // 事件委托 因为li的增加是动态操作
  $("ol, ul").on("click", "a", function () {

    // 先获取本地存储

    let data = getDate()
    // console.log(data)
    // 修改数据
    // 这里还是不能用这个方法 容易被写死index
    // let index = $(this).parents("li").index()
    let index = $(this).attr("id")
    console.log(index)
    // data.splice(data.length - index - 1, 1)
    // console.log(data)
    data.splice(index, 1)

    // 保存到本地存储
    saveDate(data)
    // 重新渲染页面
    load()
  })


  // 6. 正在进行 和 已经完成的选项
  $("ol, ul").on("click", "input", function () {
    // alert(111)
    // 先获取本地存储的数据
    let data = getDate()
    // 修改数据
    // let index = $(this).parents("li").index()
    // index = data.length - index - 1
    let index = $(this).siblings("a").attr("id")
    console.log(index)
    data[index].done = $(this).prop("checked")
    console.log(data)
    // 保存到本地存储的数据
    saveDate(data)
    // 重新渲染页面 这里对load()函数进行修改
    // 当done为true 就放在"已经完成里面" done为false 就放在 "正在进行里面"
    load()
  })



})